
import React, { FC, useRef,useEffect } from 'react'
import { UserOutlined } from "@ant-design/icons"
import { inject, observer } from 'mobx-react';
import { ajax } from './../api/index';
import { baseURL } from '../api/request';
const MyAvatar:FC<any>=({
    uinfo
})=>{
    const {userInfo,changeInfo,changeInfoAsync} = uinfo

    const file:any  = useRef()
    const startUpload = ()=>{
        file.current.click()
    }
    const todoUpload = async ()=>{
        var filedata = file.current.files[0]
        var data = new FormData()
        data.append('file',filedata)

        let res = await ajax.uploadfile(data)
        let {path} = res;
        if(res.code==200){
            // 上传成功 
            // 修改用户信息 
            let {code,result} = await ajax.changeuserinfo({
                avatar:path 
            })
            if(code==200){
                // 修改userInfo 
                userInfo.avatar = path;
                changeInfo(userInfo);
            }
        }
    }

    return(
        <div style={{marginLeft:"0.15rem",display:'flex',alignItems:"center",cursor:'pointer'}}>
            <input type="file" style={{display:'none' }}  ref={file}  onChange={todoUpload} />
                {
                     userInfo?.avatar?
                     <img src={userInfo.avatar.replace(/public/,baseURL)} style={{width:"0.6rem",height:"0.6rem",borderRadius:'50%'}}  onClick={startUpload}  />
                     :
                     <img onClick={startUpload}  style={{width:"0.6rem",height:"0.6rem",borderRadius:'50%'}}   src={require('../assets/images/xiaoxin_2.jpg')} />
                }
        </div>
    )
}


export default inject('uinfo')(observer(MyAvatar))